<section class="content-header">
    <h1>&nbsp;</h1>
    <ol class="breadcrumb">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
            告警配置</a></li>
        <li class="active">Queue告警配置</li>
    </ol>
</section>
<!-- Main content -->
<section class="content" >

    <div class="row"  ng-controller="queueCtrl" >
        <div class="col-xs-12">
            <div class="box">

                <div class="box-body" style=" ">
                    <div   class="col-sm-offset-1 col-sm-10"  >
                        <form name="queueForm" class="row form-horizontal" ng-submit="update(queueForm.$valid)"  validate>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label  ">是否启用</label>
                                <div class="col-sm-4">
                                    <div class="checkbox">
                                        <label>
                                            <!--<input type="radio" name="enabled"   data-ng-model="obj.enabled"
                                                   ng-value="true" checked> 是
                                            <input type="radio" name="enabled"   data-ng-model="obj.enabled"
                                                   ng-value="false" checked> 否-->
                                            <input type="checkbox" name="enabled" data-ng-model="obj.enabled" ng-true-value="true"
                                                   ng-false-value="false"     > 启用
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label  ">数据中心</label>
                                <div class="col-sm-6">
                                    <div class="checkbox" data-ng-repeat="area in areas track by $index" style="display: inline-block;margin-right: 15px;">
                                        <label>
                                            <input type="checkbox" name="area"   value="{{area.code}}"  > {{area.code}}
                                        </label>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group"   >
                                <label  class="col-sm-2 control-label  ">检测周期</label>
                                <div class="col-sm-4"   >
                                    <input  type="text" class="form-control"  data-ng-model="obj.alarmCron"
                                            placeholder="请输入检测周期"    required>

                                </div>
                                <label   class=" col-sm-4 control-label text-info" style="text-align: left;"><small><a href="{{$root.configs.cron_expressions_url}}" target="_blank">点击查看表达式规则</a></small></label>
                            </div>
                            <div class="form-group"   >
                                <label  class="col-sm-2 control-label  ">队列消息堆积告警阈值</label>
                                <div class="col-sm-4"   >
                                    <input  type="number"   class="form-control"  data-ng-model="obj.alarmSettings.QUEUE_MESSAGE_AMOUNT_THRESHOLD  "
                                            placeholder="请输入消息堆积告警阈值"   max="100000" min="0"  required>

                                </div>
                                <label   class=" col-sm-4 control-label text-info" style="text-align: left;"><small>队列消息数量大于或等于此值时触发告警</small></label>
                            </div>
                            <div class="form-group"   >
                                <label  class="col-sm-2 control-label  ">队列是否正常被消费</label>
                                <div class="col-sm-4"   >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"  data-ng-model="obj.alarmSettings.QUEUE_MESSAGE_IS_CONSUMED "
                                                   ng-true-value="'true'"
                                                   ng-false-value="'false'"     disabled> 启用
                                        </label>
                                    </div>
                                </div>
                                <label   class=" col-sm-4 control-label text-info" style="text-align: left;"><small>勾选后若队列消息不正常被消费则触发告警</small></label>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label  ">告警方式</label>
                                <div class="col-sm-2" data-ng-repeat="item in waySort(obj.alarmWay)">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="alarmWay" data-ng-model="obj.alarmWay[$index]" ng-true-value="'{{item}}'"
                                                   ng-false-value="''"> {{item}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group"   >
                                <label  class="col-sm-2 control-label  ">手机号码</label>
                                <div class="col-sm-4"   >
                                    <input  type="text"   class="form-control"  data-ng-model="obj.mobile" placeholder="请输入手机号码">
                                </div>
                                <label   class=" col-sm-4 control-label text-info" style="text-align: left;"><small>接收短信的手机号码，多个以英文逗号分隔。</small></label>
                            </div>
                            <div class="form-group item"  data-ng-repeat="email in emails track by $index">
                                <label  class="col-sm-2 control-label  ">Email({{$index+1}})</label>
                                <div class="col-sm-4"   >
                                    <div class="input-group">
                                        <input  type="email" class="form-control" name="email"  data-ng-model="emails[$index]"
                                                placeholder="请输入Email地址"    >
                                        <div class="input-group-btn">
                                            <a href="javascript:void(0);" class=" btn btn-default  "  ng-click="plusEmail();" ><span class="glyphicon glyphicon-plus"></span></a>
                                            <a href="javascript:void(0);" class=" btn btn-default    "  ng-click="minusEmail($index);" ><span class="glyphicon glyphicon-minus"></span></a>
                                        </div><!-- /btn-group -->
                                    </div>
                                </div>
                                <label   class="col-sm-4 control-label text-info" style="text-align: left;"><small>用于接收告警邮件的Email地址</small></label>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-4">
                                    <button type="submit" class="btn btn-success"  id="btnSave"  >保存</button>
                                </div>
                            </div>
                        </form>
                        <div class="row" style="margin-top:50px;">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-info"  >
                                    <div class="panel-heading">
                                        <button type="button" class="btn btn-danger btn-xs  pull-right"
                                                data-ng-click="openEditDialog(null,false)">新增</button>
                                        <h4 class="panel-title" style="margin-right: 100px;"  data-ng-click="toggle('panelAppQueueList')">
                                            <a data-toggle="collapse" data-parent="#accordion" >
                                                指令列表
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="panelAppQueueList" class="panel-collapse collapse in">
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-xs-3 col-md-3 pull-right">
                                                    <div class="input-group input-group-sm"
                                                         style="width: 200px; float: right;  ">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn" data-ng-bind="'Total : '+page.total+', limit : '"></button>
                                                        </div>
                                                        <!-- /btn-group -->
                                                        <input type="number" class="form-control" tabindex="2"
                                                               data-ng-model="page.pageSize"   >
                                                    </div>
                                                </div>
                                                <div class="input-group  input-group-sm col-xs-3 col-md-3"
                                                     style="width: 200px; float: left;margin-left:15px; ">
                                                    <input tabindex="1" type="text" class="form-control input-sm pull-left" style="width:200px;margin-right:10px;  display:inline;  " data-ng-model="strFil"  placeholder="全文索引" />
                                                </div>

                                            </div>
                                            <table id="example1" class="table table-bordered table-striped" style="margin-top:10px;">
                                                <thead>
                                                <tr>
                                                    <th>
                                                        <a href="javascript:void(0);" style="color:black; "   data-ng-click="sort('name')">（指令/消息）名称
                                                            <span class="glyphicon glyphicon-sort btn-xs"  ></span>
                                                        </a>
                                                    </th>
                                                    <th>
                                                        禁用
                                                    </th>
                                                    <th>
                                                        告警邮箱
                                                    </th>
                                                    <th>
                                                        告警手机号码
                                                    </th>
                                                    <th>
                                                        <a href="javascript:void(0);" style="color:black; "   data-ng-click="sort('maxMsg')">消息堆积阈值
                                                            <span class="glyphicon glyphicon-sort btn-xs"  ></span>
                                                        </a>
                                                    </th>
                                                    <th width="100px;">操作</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr data-ng-repeat="item in datas | filter:strFil|filter:{receiver:queryCondition.receiver,sender:queryCondition.sender} | orderBy:orderName:ascOrDesc | limitTo:page.pageSize">
                                                    <td data-ng-bind="item.name"></td>
                                                    <td data-ng-bind="item.disabled ? '是':'否'"></td>
                                                    <td  width="250px;">
                                                        <a href="javascript:void(0)" data-ng-click="showEmails($event)" data-ng-show="item.emails.length" >emails({{item.emails.length}})</a>
                                                        <div style="display: none; ">
                                                            <div   data-ng-repeat="email in item.emails">{{email}}<br></div>
                                                        </div>
                                                    </td>
                                                    <td  width="250px;">
                                                        <a href="javascript:void(0)" data-ng-click="showEmails($event)" data-ng-show="item.mobile.length > 0" >mobile({{split(item.mobile).length}})</a>
                                                        <div style="display: none; ">
                                                            <div  data-ng-repeat="mobile in split(item.mobile)">{{mobile}}<br></div>
                                                        </div>
                                                    </td>
                                                    <td data-ng-bind="item.maxMsg"></td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary btn-xs"
                                                                data-ng-click="openEditDialog(item.name,true)">修改</button>
                                                        <button type="button" class="btn btn-danger btn-xs" id="{{'btnDel-' + item.name}}"
                                                                data-ng-click="deleteQueueAlarm(item.name, $event)">删除</button>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-info " style="padding-left:0;margin-left:0;">
                                    <div class="panel-heading">
                                        功能描述
                                    </div>
                                    <div class="panel-body">
                                        <p>1、 检测基础配置中的队列是否在RabbitMQ中存在。</p>
                                        <p>2、 检测RabbitMQ队列消息堆积。</p>
                                        <p>3、 检测RabbitMQ中队列里的消息是否正常被消费。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-offset-1 col-sm-7">

                            </div>

                        </div>
                    </div>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>

</section>
